<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>event-frame</title>
		<%@ include file="../include/common.jsp"%>
		<%@ include file="../include/tree.jsp"%>
		<script type="text/javascript"
			src="${pageContext.request.contextPath}/js/jquery/iframe.js"></script>
		<script type="text/javascript"
			src="${pageContext.request.contextPath}/js/common/jkmegamenu.js"></script>
		<link rel="stylesheet"
			href="${pageContext.request.contextPath}/style/default/bsm/res_view_menu.css"
			type="text/css" />
		<link rel="stylesheet" type="text/css"
			href="${pageContext.request.contextPath}/style/default/bsm/sub_menu.css" />
		<script type="text/javascript">
    jkmegamenu.definemenu("megaanchor", "megamenu1", "click");
    var currentResView = '-1';
    var zTree;
    var dimension = '';
    var scope = new Array();
    var scopeName = new Array();
    var resDimension = '';
    var resIdScope = new Array();
    var resNameScope = new Array();
    function setContent() {
		var windowHeight = getWindowHeight();
		var contentElement = document.getElementById('eventContentFrame');
		contentElement.style.height = (windowHeight - 38) + 'px';
    	 $("#tree_div").css("height",windowHeight-38);
	}
	   var menuMap = {};
	   function menuChange(){
		   	$(".actived").removeClass("actived");
			$(this).addClass("actived");
			lastMenu.res = $(this).attr("id");
	   }
	function menuClick(){
   	lastMenu.res = $(this).attr("id");

   	$(".actived").removeClass("actived");
	$(this).addClass("actived");
	
	if (menuMap[this.name] == null) {
		menuMap[this.name] = this.href;
	}
	
	if(lastNode.id==null ){

		document.getElementById("eventContentFrame").src = "/bsm/jsp/include/not-res-msg.jsp";
		return false;
	}

	var arg = "?id=" + lastNode.id + "&pId=" + lastNode.pId + "&viewId="
			+ currentResView;
			
	$(this).attr("href", menuMap[this.name] + arg);
    }
    function initMenu(){
    	var typeView = new Object();
    	typeView.id = -1;
    	typeView.name = "按资源类别";
    	appendResView(typeView);
    	var resView = new Object();
    	resView.id = 1;
    	resView.name = "按监控资源";
    	appendResView(resView);
    	initFirstView(resView);
    	$("#perf_query").bind('click',menuClick);
    	$("#analysis").bind('click', menuClick);
    	$("#history").bind('click', menuClick);
    	$("#history_event").bind('click', menuChange);
    	$("#notify_query").bind('click', menuChange);
    	$("#res_search").bind('click', menuChange);
    	$("#trap_search").bind('click', menuChange);
    }
    function initFirstView(resView) {
    	$("#captionA").html(resView.name);
    	showTree(resView.id);
    }
    function appendResView(resView) {
    	$("#menu").append("<li><a href='#' id='view_" + resView.id + "'>"
    			+ resView.name + "</a></li>");
    	$("#view_" + resView.id).bind('click', {
    				view : resView
    			}, viewClick);
    	$("#tree_div")
		.append("<ul id='tree_"
				+ resView.id
				+ "' class='ztree' style='margin:0px; padding:0px; display:none;'></ul>");
    }
    function viewClick(e) {

    	$("#tree_" + currentResView).hide();
    	var resView = e.data.view;
    	$("#captionA").html(resView.name);
    	showTree(resView.id);
    	currentResView = resView.id;
    }
    function showTree(viewId) {
    	$("#tree_" + viewId).show();
    	if(viewId == '-1'){
    		showDimensionMenu();
    	}else{
    		$.fn.zTree.init($("#tree_" + viewId), configTree(viewId));
    	}
    }
  
   var lastMenu = {};
var lastNode = new Object();
lastMenu.res = "perf_query";
    function configTree(viewId) {
    	var setting = {
    		async : {
    			enable : true,
    			url : "${pageContext.request.contextPath}/resource/res-select-tree.action",
    			dataType : "text",
    			autoParam : ["id"],
    			otherParam : ["viewId", viewId]
    		},
    		view : {
    			showLine : true,
    			expandSpeed : ""
    		},
    		callback : {
    			onClick : function(event, treeId, treeNode) {
    					try{
    					
    				var arr = (treeNode.id).split("|");
    				if(arr[0] == '2'){
    					lastNode.type = arr[0];
						lastNode.id = arr[1];
						lastNode.pId = arr[2];
						if(lastMenu.res=='perf_query' || lastMenu.res=='analysis' || lastMenu.res=='history'){
    						document.getElementById(lastMenu.res).click();
    						return;
    					}
    					var resArray = resDimension.split(",");
    					var flag = true;
    					for(var i = 0; i < resArray.length; i++){
    						if(resArray[i] == arr[1]){
    							flag = false;
    						}
    					}
    						
    					if(flag){
							resIdScope[arr[1]] = arr[1];
        					resNameScope[arr[1]] = treeNode.name;
        					resDimension = resDimension + "," + arr[1];
        					resIdChange();
						}
					
						
					
						
						
    				}
    				}catch(e){
    				}
    			}
    		}
    	};
    	return setting;
    }
 
 

    function resIdChange(){
			var resDim = resDimension.split(',');
			var resIdResult = '';
		    var resNameResult = '';
			var iframe = document.getElementById("eventContentFrame").contentWindow;
			for(var i= 0; i<resDim.length;i++){
				if(resIdScope[resDim[i]]){
					resIdResult += resIdScope[resDim[i]]+",";
					resNameResult += "<span class='delDiv' id='"+resIdScope[resDim[i]]+"' onclick='delResDiv("+resIdScope[resDim[i]]+");'>"+resNameScope[resDim[i]]+"</span>";
				}
			}
			iframe.refreshResSearch(resIdResult.substring(0, resIdResult.length-1),resNameResult);
			$("#resId").val(resIdResult.substring(0, resIdResult.length-1));
			$("#resName").val(resNameResult);
	}
    function delResDiv(id){
    	var m = "";
    	var resArray = resDimension.split(",");
		for(var i = 0; i < resArray.length; i++){
			if(resArray[i] != id){
				m += resArray[i] + ",";
			}
		}
		resDimension = m;
		resIdChange();
	}

		$(document).ready(function(){
				
				outerLayout = $('body').layout({ 
						center__paneSelector:	    ".outer-center" 
						,	west__paneSelector:		".outer-west" 
						,	west__size:				190 
						,	spacing_open:			8 // ALL panes
						,	spacing_closed:			8 // ALL panes
						,   togglerTip_open:'关闭'
						,   togglerTip_closed: "显示"
						,   slidable:false
			
				}); 
			
			
				initMenu();
				$("#resMenu a").get(0).click();
				//$("#view_-1").click();
		});
		var setting = {
				check: {
					enable: true,
					chkboxType: {"Y" : "ps", "N" : "ps"}
				},
				view: {
					dblClickExpand: false
				},
				data: {
					simpleData: {
						enable: true
					}
				},
				callback: {
					onClick: onClick,
					onCheck: onCheck
				}
			};
		function onClick(e, treeId, treeNode) {
			//点的是实节点
			if(treeNode.id.indexOf(',') > 0){
				var flag = true;
				if(dimension != ''){
					var dimenArray = dimension.split(",");
					for(var i=0;i<dimenArray.length;i++){
						if(treeNode.id.split(",")[0] == dimenArray[i]){
							flag = false;
							break;
						}
					}
					if(flag){
						dimension += treeNode.id.split(",")[0]+",";
					}
				}else{
					dimension += treeNode.id.split(",")[0]+",";
				}
			}
			var dim = dimension.split(',');
			for(var i = 0 ; i < dim.length ; i++){
				if((treeNode.id.indexOf(',') >0) && treeNode.id.split(',')[0] == dim[i]){
					scope[treeNode.id.split(',')[0]] = treeNode.id;
					scopeName[treeNode.id.split(',')[0]] = treeNode.name;
				}
			}
			changValue();
		}
		function delDiv(id){
			var m = "";
			for(var i = 0; i < dimension.split(",").length; i++){
				if(dimension.split(",")[i].split('-')[0] != id){
					m += dimension.split(",")[i] + ",";
				}
			}
			dimension = m;
			changValue();
		}
		function changValue(){
			try{
				dim = dimension.split(',');
				var scopeResult = '';
			    var scopeNameResult = '';
				var iframe = document.getElementById("eventContentFrame").contentWindow;
				for(var i= 0; i<dim.length;i++){
					if(scope[dim[i]]){
						scopeResult += scope[dim[i]]+"|";
						//scopeNameResult += "<span class='delDiv' id='"+scope[dim[i]].split(',')[0].split('-')[0]+"' onclick='delDiv("+scope[dim[i]].split(',')[0].split('-')[0]+");'>"+scope[dim[i]].split(',')[0].split('-')[1]+':'+scopeName[dim[i]]+"</span>";
						scopeNameResult += "<span class='delDiv' id='"+scope[dim[i]].split(',')[0].split('-')[0]+"' onclick='delDiv("+scope[dim[i]].split(',')[0].split('-')[0]+");'>"+scopeName[dim[i]]+"</span>";
					}
				}
				iframe.refreshTable(scopeResult.substring(0, scopeResult.length-1),scopeNameResult);
				$("#scope").val(scopeResult.substring(0, scopeResult.length-1));
				$("#scopeName").val(scopeNameResult.substring(0, scopeNameResult.length-1));
			}catch(e){
				
			}
		}
			function onCheck(e, treeId, treeNode) {
			}
			function showDimensionMenu() {
				$.ajax({ 
					  type:"post", 
					  url:"${pageContext.request.contextPath}/event/event-frame!dimensionTreeData.action", 
					  data:"", 
					  datatype:"json",
					  success:function(data) { 
							var zNodes=eval(data);
							zTree = $.fn.zTree.init($("#tree_-1"), setting, zNodes);
					  } 
			     	})
			}

			
    </script>

	</head>
	<body>
		<input id="resId" name="resId" type="hidden" />
		<input id="resName" name="resName" type="hidden" />
		<input id="scope" name="scope" type="hidden" />
		<input id="scopeName" name="scopeName" type="hidden" />
		<div class="outer-west" class="outer-west">
			<div id="megaanchor">
				<a href="#" id="captionA" hidefocus="true"></a>
			</div>
			<div id="megamenu1" class="sidebar">
				<ul id="menu" style="overflow: auto;">
				</ul>
			</div>
			<div id="tree_div" style="overflow: auto;">
			</div>
		</div>
		<div id="outer-center" class="outer-center">
			<div class="inner-north">
				<div id="second_menu">
					<div class="mainmenu_rbg" id="second_menu_wrap">
						<span id="resMenu">
						 <a
							href="${pageContext.request.contextPath}/event/history-event!common.action"
							id="history_event" hidefocus="true" name="history_event"
							target="eventContentFrame" onclick="refresh();"><img
									src='../style/default/bsm/menu/eventSearch.gif' />事件查询</a> <a
							href="${pageContext.request.contextPath}/event/notify-his!common.action?flag=0"
							id="notify_query" name="notify_query" hidefocus="true"
							target="eventContentFrame"><img
									src='../style/default/bsm/menu/mailSearch.gif' />通知查询</a> <a
							href="${pageContext.request.contextPath}/resource/res!search.action"
							id="res_search" name="res_search" hidefocus="true"
							target="eventContentFrame"><img
									src='../style/default/bsm/menu/reSearch.gif' />资源查询</a> <a
							href="${pageContext.request.contextPath}/fault/trap!common.action"
							id="trap_search" name="trap_search" hidefocus="true"
							target="eventContentFrame"><img
									src='../style/default/bsm/menu/eventSearch.gif' />Trap查询</a>
						    <a
							href="${pageContext.request.contextPath}/performance/prop-query.action"
							id="perf_query" name="perf_query" hidefocus="true"
							target="eventContentFrame"><img
									src='${pageContext.request.contextPath}/style/default/bsm/menu/xingnengchaxun.png' />性能查询</a>
							<a
							href="${pageContext.request.contextPath}/performance/prop-trend.action"
							id="analysis" hidefocus="true" name="analysis"
							target="eventContentFrame"><img
									src='${pageContext.request.contextPath}/style/default/bsm/menu/xingnengqushi.png' />趋势分析</a>
							<a
							href="${pageContext.request.contextPath}/resource/res-healthy!history.action"
							id="history" hidefocus="true" name="history"
							target="eventContentFrame"><img
									src='${pageContext.request.contextPath}/style/default/bsm/menu/jiankangdu.png' />健康度分析</a>
							<!-- <a href="${pageContext.request.contextPath}/event/active-event!common.action" id="active_event" name="active_event" hidefocus="true" target="contentFrame"><img src='../style/default/bsm/menu/default.png'/>活动事件</a> -->
							 </span>
					</div>
				</div>
			</div>
			<div class="inner-center">
				<iframe style="margin: 0px; padding: 0px;" id="eventContentFrame"
					name="eventContentFrame" src="#" frameborder="0" width="100%"
					height="10px;"></iframe>
			</div>
		</div>
	</body>
</html>